<template>
  <div class="certifi">
    <company-home-content-layout v-if="menu.length > 0">
      <template slot="menu">
        <menu-b :menu="menu" @item-click="handleItemClick" />
      </template>
      <template>
        <div class="certifi-content">
          <div id="scene" class="certifi-scene" v-if="allmenu && allmenu[0].show">
            <div class="img-title">
              <div class="img-and-title">
                <img class="img" src="~/assets/images/menu-certifi-scene.png" alt="" />
                <span class="title">实景认证</span>
              </div>
              <div class="line"></div>
            </div>
            <div class="scene-body">
              <div class="pic"><img :src="info.scenery.image" class="objectCover" /></div>
            </div>
          </div>
          <div id="produce" class="certifi-produce" v-if="allmenu && allmenu[1].show">
            <div class="img-title">
              <div class="img-and-title">
                <img class="img" src="~/assets/images/menu-certifi-produce.png" alt="" />
                <span class="title">生产能力</span>
              </div>
              <div class="line"></div>
            </div>
            <div class="produce-body">
              <Table border :data="info.capacity" style="margin-bottom: 20px">
                <table-column prop="title" label="名称" />
                <table-column prop="description" label="描述" />
                <table-column prop="number" label="数量" />
              </Table>
              <div class="swiperBox swiperBox1">
                <swiper class="swiper list" :options="panelSwiper">
                  <swiper-slide class="item" v-for="(item, index) in info.capacity" :key="index">
                    <div class="mask">
                      <div class="name">{{ item.title }}</div>
                    </div>
                    <div class="pic"><img :src="item.image" class="objectCover" /></div>
                    <div class="title">{{ item.title }}</div>
                  </swiper-slide>
                </swiper>
                <div class="prev"><img src="~/assets/images/left.png" alt="prev" /></div>
                <div class="next"><img src="~/assets/images/right.png" alt="next" /></div>
              </div>
            </div>
          </div>
          <div id="rd" class="certifi-rd" v-if="allmenu[2].show">
            <div class="img-title">
              <div class="img-and-title">
                <img class="img" src="~/assets/images/menu-certifi-rd.png" alt="" />
                <span class="title">研发能力</span>
              </div>
              <div class="line"></div>
            </div>
            <div class="rd-body">
              <div class="subtotal">研发人数：{{ number || 0 }}人</div>
              <Table border :data="info.research" style="margin-bottom: 20px">
                <table-column prop="title" label="设备" />
                <table-column prop="brand" label="品牌" />
                <table-column prop="version" label="型号" />
                <table-column prop="number" label="数量" />
              </Table>
              <div class="swiperBox swiperBox2">
                <swiper class="swiper list" :options="panelSwiper2">
                  <swiper-slide class="item" v-for="(item, index) in info.research" :key="index">
                    <div class="mask">
                      <div class="name">{{ item.title }}</div>
                    </div>
                    <div class="pic"><img :src="item.image" class="objectCover" /></div>
                    <div class="title">{{ item.title }}</div>
                  </swiper-slide>
                </swiper>
                <div class="prev"><img src="~/assets/images/left.png" alt="prev" /></div>
                <div class="next"><img src="~/assets/images/right.png" alt="next" /></div>
              </div>
            </div>
          </div>

          <div id="quality" class="certifi-quality" v-if="allmenu[3].show">
            <div class="img-title">
              <div class="img-and-title">
                <img class="img" src="~/assets/images/menu-certifi-quality.png" alt="" />
                <span class="title">质量管理</span>
              </div>
              <div class="line"></div>
            </div>
            <div class="quality-body">
              <Table border :data="info.quality">
                <table-column prop="title" label="体系" />
                <table-column prop="certificate" label="证书" />
                <table-column prop="certification" label="认证机构" />
                <table-column prop="period" label="有效期" />
              </Table>
            </div>
          </div>
          <div id="proof" class="certifi-proof" v-if="allmenu[4].show">
            <div class="img-title">
              <div class="img-and-title">
                <img class="img" src="~/assets/images/menu-certifi-proof.png" alt="" />
                <span class="title">资质证书</span>
              </div>
              <div class="line"></div>
            </div>
            <div class="proof-body">
              <Table border :data="info.aptitude">
                <table-column prop="title" label="体系" />
                <table-column prop="certificate" label="证书" />
                <table-column prop="certification" label="认证机构" />
                <table-column prop="period" label="有效期" />
              </Table>
            </div>
          </div>
          <div id="report" class="certifi-report" v-if="allmenu[5].show">
            <div class="img-title">
              <div class="img-and-title">
                <img class="img" src="~/assets/images/menu-certifi-report.png" alt="" />
                <span class="title">认证报告</span>
              </div>
              <div class="line"></div>
            </div>
            <div class="report-body">
              <div class="item" v-for="(item, index) in info.certification" :key="index">
                <div class="pic"><img :src="item.image" class="objectCover" /></div>
                <div class="title">
                  <div class="text">{{ item.title }}</div>
                  <div class="foot">
                    <div class="time">{{ item.create_time }}</div>
                    <div class="btns">
                      <a :href="item.file" target="_blank" class="preview btn">查看</a>
                      <a :href="item.file" :download="item.file" class="btn">下载</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </company-home-content-layout>
    <not-certified v-else />
  </div>
</template>

<script>
import NotCertified from '@/views/company-home/children/NotCertified';
import CompanyHomeContentLayout from '@/components/common/company-home-content-layout/company-home-content-layout';
import MenuB from '@/views/company-home/children/MenuB';
import MButton from '@/components/common/m-button/MButton';
import { Table, TableColumn } from 'element-ui';
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.css';
import { getMerchantMate, getMerchantDe } from '@/request/api';

export default {
  name: 'Certifi',
  components: {
    MButton,
    MenuB,
    CompanyHomeContentLayout,
    Table,
    TableColumn,
    swiper,
    swiperSlide,
    NotCertified
  },
  data() {
    return {
      id: '',
      info: {
        exhibitors: '',
        license: '',
        merchant: '',
        overview: '',
        photo: '',
        product: ''
      },
      panelSwiper: {
        slidesPerView: 4,
        slidesPerColumn: 1,
        slidesPerGroup: 4,
        navigation: {
          nextEl: '.swiperBox1 .next',
          prevEl: '.swiperBox1 .prev',
          disabledClass: 'my-button-disabled',
          hiddenClass: 'my-button-hidden'
        },
        observer: true
      },
      panelSwiper2: {
        slidesPerView: 4,
        slidesPerColumn: 1,
        slidesPerGroup: 4,
        navigation: {
          nextEl: '.swiperBox2 .next',
          prevEl: '.swiperBox2 .prev',
          disabledClass: 'my-button-disabled',
          hiddenClass: 'my-button-hidden'
        },
        observer: true
      },
      allmenu: [
        {
          index: '1',
          title: '实景认证',
          defaultSrc: require('@/assets/images/menu-certifi-scene.png'),
          activeSrc: require('@/assets/images/menu-certifi-scene-active.png'),
          anchor: 'scene'
        },
        {
          index: '2',
          title: '生产能力',
          defaultSrc: require('@/assets/images/menu-certifi-produce.png'),
          activeSrc: require('@/assets/images/menu-certifi-produce-active.png'),
          anchor: 'produce'
        },
        {
          index: '3',
          title: '研发能力',
          defaultSrc: require('@/assets/images/menu-certifi-rd.png'),
          activeSrc: require('@/assets/images/menu-certifi-rd-active.png'),
          anchor: 'rd'
        },
        {
          index: '4',
          title: '质量管理',
          defaultSrc: require('@/assets/images/menu-certifi-quality.png'),
          activeSrc: require('@/assets/images/menu-certifi-quality-active.png'),
          anchor: 'quality'
        },
        {
          index: '5',
          title: '资质证书',
          defaultSrc: require('@/assets/images/menu-certifi-proof.png'),
          activeSrc: require('@/assets/images/menu-certifi-proof-active.png'),
          anchor: 'proof'
        },
        {
          index: '6',
          title: '认证报告',
          defaultSrc: require('@/assets/images/menu-certifi-report.png'),
          activeSrc: require('@/assets/images/menu-certifi-report-active.png'),
          anchor: 'report'
        }
      ],
      menu: [],
      number: 0
    };
  },
  created() {
    this.id = this.$route.params.id;
    // this.getInfo();
    // this.getNumber()
  },
  methods: {
    getInfo() {
      let id = this.$route.params.id;
      getMerchantMate(id)
        .then(res => {
          this.info = res.data.list.lst;
          let cate = res.data.list.category;
          for (var i in cate) {
            for (var j in this.allmenu) {
              if (this.allmenu[j].title == cate[i].title) {
                this.allmenu[j].show = true;
                this.menu.push(this.allmenu[j]);
              }
            }
          }
        })
        .catch(err => {
          this.$message.error(err.message);
        });
    },
    getNumber() {
      getMerchantDe(this.id).then(res => {
        // console.log(res, 'res');
      });
    },
    handleItemClick(item) {
      this.$common.goAnchor('#' + item.anchor);
    }
  }
};
</script>

<style lang="scss" scoped>
@import '~@/assets/style/common.scss';
/deep/ .el-menu-item {
  border-bottom: 1px solid #eee;
}
.certifi {
  .certifi-content {
    background-color: #fff;
    padding: 25px 25px;

    /deep/ .el-table {
      text-align: center;
      .has-gutter {
        color: #fff;

        th {
          background-color: rgb(102, 102, 102) !important;
          border-right: none;
          text-align: center;
          padding: 8px 0;
        }
      }

      .el-table__body {
        td {
          background-color: rgb(243, 244, 247);
          border-color: rgb(226, 226, 228);
          text-align: center;
        }
      }
    }

    .img-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 25px;

      .img-and-title {
        width: 130px;

        .title {
          font-size: 20px;
          color: #666;
          font-weight: bold;
        }

        .img {
          margin-right: 10px;
        }
      }

      .line {
        width: calc(100% - 130px);
        height: 1px;
        background-color: #eaeaea;
      }

      .btns {
        width: 80px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-left: 20px;

        div {
          width: 31px;
          height: 31px;
          border-radius: 31px;
          background-color: $theme-color-1;
          color: #fff;
          font-size: 20px;
          line-height: 31px;
          text-align: center;
          cursor: pointer;
        }
        .div:focus {
          outline: none;
        }
      }
    }

    .certifi-scene {
      margin-bottom: 50px;

      .scene-body {
        .pic {
          width: 100%;
          height: 260px;
          background-color: pink;
        }
      }
    }

    .certifi-produce {
      margin-bottom: 50px;

      .produce-body {
        .list {
          margin: 0 -10px;
          position: relative;

          .item {
            position: relative;

            margin: 0 10px;
            border: solid 1px #eaeaea;
            display: inline-block;

            &:hover {
              .mask {
                visibility: visible;
              }
            }

            .mask {
              height: 161px;
              background-color: rgba(0, 0, 0, 0.4);
              visibility: hidden;
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              display: flex;
              justify-content: center;
              align-items: center;

              .name {
                color: #fff;
                width: 90%;
                height: 85%;
                border: dashed 1px #fff;
                display: flex;
                justify-content: center;
                align-items: center;
              }
            }

            .pic {
              height: 161px;
              background-color: mediumaquamarine;
            }

            .title {
              height: 30px;
              line-height: 30px;
              text-align: center;
              font-size: 16px;
              color: #666;
            }
          }

          .prev,
          .next {
            display: inline-block;
            width: 31px;
            height: 31px;
            border-radius: 31px;
            background-color: $theme-color-1;
            color: #fff;
            font-size: 18px;
            text-align: center;
            line-height: 31px;
            position: absolute;
            cursor: pointer;

            &.prev {
              left: 0;
              top: calc(161px / 2 - 31px / 2);
            }

            &.next {
              right: 0;
              top: calc(161px / 2 - 31px / 2);
            }
          }
          .prev:focus,
          .next:focus {
            outline: none;
          }
        }
      }
    }

    .certifi-rd {
      margin-bottom: 50px;

      .rd-body {
        .subtotal {
          font-size: 16px;
          color: #969696;
          margin-bottom: 20px;
        }

        .list {
          margin: 0 -10px;
          position: relative;

          .item {
            position: relative;

            margin: 0 10px;
            border: solid 1px #eaeaea;
            display: inline-block;

            &:hover {
              .mask {
                visibility: visible;
              }
            }

            .mask {
              height: 161px;
              background-color: rgba(0, 0, 0, 0.4);
              visibility: hidden;
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              display: flex;
              justify-content: center;
              align-items: center;

              .name {
                color: #fff;
                width: 90%;
                height: 85%;
                border: dashed 1px #fff;
                display: flex;
                justify-content: center;
                align-items: center;
              }
            }

            .pic {
              height: 161px;
              background-color: palegoldenrod;
            }

            .title {
              height: 30px;
              line-height: 30px;
              text-align: center;
              font-size: 16px;
              color: #666;
            }
          }

          .prev,
          .next {
            display: inline-block;
            width: 31px;
            height: 31px;
            border-radius: 31px;
            background-color: $theme-color-1;
            color: #fff;
            font-size: 18px;
            text-align: center;
            line-height: 31px;
            position: absolute;
            cursor: pointer;

            &.prev {
              left: 0;
              top: calc(161px / 2 - 31px / 2);
            }

            &.next {
              right: 0;
              top: calc(161px / 2 - 31px / 2);
            }
          }
        }
      }
    }

    .certifi-quality {
      margin-bottom: 50px;
    }

    .certifi-proof {
      margin-bottom: 50px;
    }

    .certifi-report {
      .report-body {
        margin: -10px;

        .item {
          position: relative;
          width: calc((100% - 60px) / 3);
          margin: 10px;
          border: solid 1px #eaeaea;
          display: inline-block;

          &:hover {
            .mask {
              visibility: visible;
            }
          }

          .pic {
            height: 161px;
            background-color: cornflowerblue;
          }

          .title {
            padding: 15px 10px;
            background-color: rgb(243, 244, 247);

            .text {
              font-size: 16px;
              color: #666666;
              margin-bottom: 15px;
            }

            .foot {
              display: flex;
              justify-content: space-between;
              align-items: center;

              .time {
                font-size: 14px;
                color: #969696;
              }

              .btns {
                display: flex;
                align-items: center;
                .btn {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background-color: rgb(255, 255, 255);
                  border: 1px solid rgb(214, 213, 213);
                  color: rgb(102, 102, 102);
                  border-radius: 10px;
                  font-size: 12px;
                  width: 56px;
                  height: 28px;
                  line-height: 1.5;
                }
                .preview {
                  margin-right: 5px;
                }
              }
            }
          }
        }
      }
    }
  }
}
.swiperBox {
  position: relative;

  .prev {
    position: absolute;
    left: -15px;
    top: 75px;
    z-index: 999;
    cursor: pointer;
  }

  .next {
    position: absolute;
    top: 75px;
    right: -15px;
    z-index: 999;
    cursor: pointer;
  }
  .prev:focus,
  .next:focus {
    outline: none;
  }
  .my-button-disabled {
    opacity: 0.6;
    cursor: default;
  }
}
.swiper {
  .item {
    width: 217.5px !important;
  }
}
</style>
